html
<template>
  <div class="main-box">
    <TreeFilter
      label="name"
      title="库房列表"
      :data="treeFilterData"
      :default-value="initParam.warehouseId + ''"
      @change="changeTreeFilter"
    />
    <el-card shadow="hover" class="warehouse-card">
      <h2 class="warehouse-title">
        <span class="warehouse-icon">
          <img src="@/assets/icons/substation_icon.svg" class="icon" />
        </span>
        库房信息
      </h2>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="库房ID">
          {{ warehouse!.warehouseId }}
        </el-descriptions-item>
        <el-descriptions-item label="库房名">
          {{ warehouse!.warehouseName }}
        </el-descriptions-item>
        <el-descriptions-item label="省">
          {{ warehouse.warehouseAddress!.province }}
        </el-descriptions-item>
        <el-descriptions-item label="市">
          {{ warehouse.warehouseAddress!.city }}
        </el-descriptions-item>
        <el-descriptions-item label="区">
          {{ warehouse.warehouseAddress!.zone }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ warehouse.warehouseAddress!.detail }}
        </el-descriptions-item>
        <el-descriptions-item v-if="warehouse!.warehouseLevel === 0" label="库房等级">
          <el-tag>中心库房</el-tag>
        </el-descriptions-item>
        <el-descriptions-item v-if="warehouse!.warehouseLevel === 1" label="库房等级">
          <el-tag>分站库房</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ warehouse!.createTime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Warehouse } from "@/api/interface";
import { ElMessage } from "element-plus";
import { getWarehouseInfo, getWarehouseNameList } from "@/api/modules/warehouse";
import { useUserStore } from "@/stores/modules/user";
import { ProTableInstance } from "@/components/ProTable/interface";
import TreeFilter from "@/components/TreeFilter/index.vue";

const warehouse = ref<Warehouse.WarehouseInfo>({
  warehouseId: 0,
  warehouseName: "",
  warehouseAddress: { province: "string", city: "", zone: "", detail: "" },
  warehouseLevel: 0,
  createTime: new Date()
});
const userStore = useUserStore();
const initParam = reactive({ warehouseId: userStore.userInfo.departmentId });
const proTable = ref<ProTableInstance>();

onMounted(async () => {
  try {
    const response = await getWarehouseInfo({ warehouseId: userStore.userInfo.departmentId });
    warehouse.value = response.data;
  } catch (error) {
    console.error(error);
  }
  getTreeFilter();
});

const treeFilterData = ref<any>([]);
const getTreeFilter = async () => {
  const { data } = await getWarehouseNameList();
  treeFilterData.value = data;
  initParam.warehouseId = treeFilterData.value[0].id;
};

// 树形筛选切换
const changeTreeFilter = (val: any) => {
  ElMessage.success("请注意查看请求参数变化 🤔");
  proTable.value!.pageable.current = 1;
  initParam.warehouseId = val.id;
  // initParam.level = val.level;
};
</script>

<style scoped>
.warehouse-info {
  margin: 20px;
}
.warehouse-card {
  width: 99%;
  height: 100%; /* 使用 vh 单位，表示视口高度的百分比 */
  padding: 5px;
  margin: 0 auto; /* 使用 auto 值设置左右外边距为自动，实现水平居中 */
}
.fixed-label {
  width: 150px; /* 设置 label 的固定宽度 */
}
.warehouse-icon .icon {
  width: 4%;
  height: auto;
  margin-bottom: -2px;
}
</style>
